<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表格管理 - 食物食材食品基本信息Web系统</title>
  <link rel="stylesheet" href="css/style.css">
  <script>
    if (!sessionStorage.getItem('isLoggedIn')) {
      window.location.href = 'login.html';
    }
  </script>
</head>
<body>
  <div class="bg"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <header>
    <h1>食物食材食品基本信息Web系统</h1>
    <nav>
      <div class="user-menu" id="userMenu">
        <img src="img/avatar.png" alt="头像" class="avatar" id="userAvatar">
        <span class="username" id="usernameDisplay">用户</span>
        <span class="dropdown-arrow">&#9662;</span>
        <div class="dropdown-menu" id="dropdownMenu">
          <a href="#" id="profileLink"><span class="menu-icon">&#8962;</span> 个人空间</a>
          <a href="login.html" id="logout"><span class="menu-icon">&#9906;</span> 退出登录</a>
        </div>
      </div>
    </nav>
  </header>
  <main>
    <a href="index.html" class="back-home-btn"><span>返回首页</span></a>
    <section>
      <h2>表格管理</h2>
      <p class="admin-notice">此功能仅限管理员使用</p>
      
      <!-- 创建新表格按钮 -->
      <div class="admin-section" style="text-align:center;">
        <button id="openCreateTableModal" class="btn btn-primary" style="font-size:1.2em;width:400px;height:60px;">新建表格</button>
      </div>
      
      <!-- 自定义表格列表 -->
      <div class="admin-section">
        <h3>自定义表格</h3>
        <div id="tablesList">
          <!-- 自定义表格将在这里显示 -->
        </div>
      </div>
      
      <!-- 创建新表格弹窗 -->
      <div id="createTableModal" class="modal" style="display:none;">
        <div class="modal-content" style="position:relative;">
          <span class="modal-close" id="closeCreateTableModal" style="position:absolute;right:18px;top:12px;font-size:2em;color:#888;cursor:pointer;">&times;</span>
          <h3 style="margin-bottom:18px;">创建新表格</h3>
          <form id="createTableForm" class="admin-form">
            <div class="form-row">
              <div class="form-group">
                <label for="tableName">表格名称：</label>
                <input type="text" id="tableName" name="tableName" required>
              </div>
              <div class="form-group">
                <label for="tableDescription">表格描述：</label>
                <input type="text" id="tableDescription" name="tableDescription">
              </div>
            </div>
            <div class="form-group">
              <label>字段定义：</label>
              <div id="fieldsContainer">
                <div class="field-row">
                  <input type="text" placeholder="字段名称" class="field-name">
                  <select class="field-type">
                    <option value="text">文本</option>
                    <option value="number">数字</option>
                    <option value="date">日期</option>
                    <option value="select">选择</option>
                    <option value="textarea">多行文本</option>
                  </select>
                  <input type="text" placeholder="约束条件" class="field-constraint">
                  <button type="button" class="btn btn-danger btn-sm remove-field">删除</button>
                </div>
              </div>
              <button type="button" class="btn btn-secondary" id="addFieldBtn">添加字段</button>
            </div>
            <div class="form-actions">
              <button type="submit" class="btn btn-primary">创建表格</button>
            </div>
          </form>
        </div>
      </div>
      
      <!-- 数据管理 -->
      <div class="admin-section">
        <h3>数据管理</h3>
        <div class="form-row">
          <div class="form-group">
            <label for="selectTable">选择表格：</label>
            <select id="selectTable" name="selectTable">
              <option value="">请选择表格</option>
              <option value="foods">食物表</option>
              <option value="ingredients">食材表</option>
              <option value="products">食品表</option>
            </select>
          </div>
        </div>
        <div class="form-actions" style="display:none;"></div>
        <!-- 操作按钮区 -->
        <div id="tableOperationBar" style="display:none;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 8px 0;">
          <div style="display:flex;align-items:center;gap:12px;">
            <button type="button" class="btn btn-secondary" id="selectAllBtn">全选</button>
            <button type="button" class="btn btn-primary" id="editSelectedBtn">编辑</button>
            <button type="button" class="btn btn-primary" id="backupSelectedBtn">备份</button>
            <button type="button" class="btn btn-danger" id="deleteSelectedBtn">删除</button>
          </div>
          <div style="display:flex;align-items:center;gap:12px;">
            <input type="text" id="tableSearchInput" class="form-control" placeholder="搜索..." style="width:180px;">
            <button type="button" class="btn btn-secondary" id="fieldSettingBtn">设置字段显示</button>
          </div>
        </div>
        <!-- 字段设置弹窗 -->
        <div id="fieldSettingModal" class="modal" style="display:none;">
          <div class="modal-content" style="max-width:400px;">
            <h4 style="margin-bottom:12px;">设置显示字段</h4>
            <div id="fieldSettingList"></div>
            <div style="text-align:right;margin-top:16px;">
              <button class="btn btn-primary" id="saveFieldSettingBtn">确定</button>
              <button class="btn btn-secondary" id="cancelFieldSettingBtn">取消</button>
            </div>
          </div>
        </div>
        <!-- 新增：表格数据展示区 -->
        <div id="tableDataContainer" style="margin-top:12px;"></div>
      </div>
      
      <!-- 操作结果 -->
      <div id="operationResult" style="display: none;">
        <div class="result-alert">
          <h4>操作结果</h4>
          <div id="resultContent"></div>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 食物食材食品基本信息Web系统</p>
  </footer>
  <script src="js/table_manage.js"></script>
  <script src="js/user_menu.js"></script>
  <div id="customTableModal" class="modal" style="display:none;">
    <div class="modal-content" id="customTableModalContent">
      <!-- 弹窗内容由js/table_manage.js动态生成 -->
    </div>
  </div>
  <div id="viewTableModal" class="modal" style="display:none;">
    <div class="modal-content" id="viewTableModalContent" style="max-width:900px;min-width:600px;">
      <!-- 表格内容由js/table_manage.js动态生成 -->
    </div>
  </div>
  <div id="editDataModal" class="modal" style="display:none;">
    <div class="modal-content" id="editDataModalContent" style="max-width:900px;min-width:600px;max-height:80vh;overflow-y:auto;">
      <!-- 编辑表单由js/table_manage.js动态生成 -->
    </div>
  </div>
</body>
</html> 